<template>
  <div class='container'>
    <div class='subject-container'>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input size="small" v-model="queryParams.subjectName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" @click="subEmpty">清除</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" size="small" @click="handleSelect">搜索</el-button>
        </el-form-item>
        <el-form-item class="rightAdd">
          <el-button class="el-icon-edit" type="success" size="small" @click="showDialog=true">新增学科
          </el-button>
        </el-form-item>
      </el-form>
      <el-alert type="info" class="alert" v-if="alertText !== ''" :title="alertText" :closable="false" show-icon></el-alert>
      <el-table :data="subList" style="width: 100%">
        <el-table-column prop="id" label="序号" width="80" type="index">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="150">
        </el-table-column>
        <el-table-column prop="creatorID" label="创建者" width="180">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="180">
        </el-table-column>
        <el-table-column prop="isFrontDisplay" label="前台是否显示" width="100">
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录" width="100">
        </el-table-column>
        <el-table-column prop="tags" label="标签" width="100">
        </el-table-column>
        <el-table-column prop="totals" label="题目数量" width="100">
        </el-table-column>
        <el-table-column label="操作" class="handle" fixed="right" width="280">
          <template #default="{row}">
            <el-button type="text" @click="jumpDirectory">学科分类</el-button>
            <el-button type="text" @click="jumpTags">学科标签</el-button>
            <el-button type="text" @click="handleModify(row)">修改</el-button>
            <el-button type="text" @click="handleClick(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background @current-change="changePage" @size-page='sizePage' :current-page="queryParams.page" :page-size="queryParams.pagesize" :page-sizes="[5, 10, 15, 20]" layout="->,total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <subjects-add :show-dialog.sync='showDialog' @toggle-box='toggleBox' :form='form' @reset='reset' />
  </div>
</template>

<script>
import { list, remove, detail } from '../../api/hmmm/subjects'
import subjectsAdd from '../components/subjects-add.vue'
export default {
  components: { subjectsAdd },
  name: 'subject',
  data () {
    return {
      form: {

        subjectName: '',
        isFrontDisplay: '1'
      },
      // 显示弹窗
      showDialog: false,
      alertText: '',
      total: 0,
      // 角色列表
      subList: [],
      // 查询参数
      queryParams: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      }
      // formList: {}
      // subName: {
      //   id: '',
      //   subjectName: '',
      //   creatorID: '',
      //   addDate: '',
      //   isFrontDisplay: '',
      //   twoLevelDirectory: '',
      //   tags: '',
      //   totals: ''

      // }

    }
  },
  created () {
    this.getList()
  },
  methods: {
    reset () {
      this.form = this.$options.data().form
    },
    // 表单回显
    async handleModify (row) {
      const ret = await detail(row)
      if (ret.data.isFrontDisplay === 1) {
        ret.data.isFrontDisplay = true
      } else {
        ret.data.isFrontDisplay = false
      }
      console.log(ret)
      // 显示弹窗
      // console.log(row)
      this.showDialog = true
      this.form = ret.data
      // console.log(this.formList)
      // console.log(this.form)
      // 刷新列表
      this.getList()
    },
    // 删除学科
    async handleClick (row) {
      // 弹出确认框
      await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        type: 'warning'
      })
      try {
        const ret = await remove(row)
        if (ret.status === 200) {
          // 删除成功，刷新列表
          this.$message.success('删除成功')
          this.getList()
        }
      } catch {
        this.$message.error('删除失败')
      }

      // const ret = await remove(row)
      // if (ret.status === 200) {
      //   // 删除成功，刷新列表
      //   this.$message.success('删除成功')
      //   this.getList()
    },

    // 子传父-父监听的弹窗
    toggleBox () {
      this.showDialog = false
    },
    // 弹窗显示

    // 搜索学科
    handleSelect () {
      this.queryParams.page = 1
      this.getList(this.queryParams)
    },
    // 监听页码的变化
    changePage (page) {
      this.queryParams.page = page
      this.getList()
    },
    sizePage (pagesize) {
      this.queryParams.pagesize = pagesize
      this.getList()
    },
    // 清除表单内容
    subEmpty () {
      this.queryParams.subjectName = ''
    },
    // 获取学科列表
    async getList () {
      const ret = await list(this.queryParams)
      if (ret !== '') {
        this.subList = ret.data.items
        this.total = ret.data.counts
        this.alertText = `数据一共${this.total}条`
      }
    },
    // 跳转学科分类
    jumpDirectory () {
      this.$router.push('directorys')
    },
    // 跳转到标签
    jumpTags () {
      this.$router.push('tags')
    }
  }
}
</script>

<style scoped lang='scss'>
.container {
  background-color: #fff;
  margin: 10px;
  border-radius: 5px;
}
.subject-container {
  padding: 20px;
}
.rightAdd {
  float: right;
}
el-table-column {
  margin-right: 10px;
}
</style>
